<template>
  <!-- 我的页面 -->
  <view class="pd">
    <!-- 头部信息 -->
    <!-- 登录之后 -->
    <template v-if="isLogin">
      <view class="me-top flex flex-s" @click="gotouse">
        <view class="me-t-left flex flex-s">
          <image
            class="mr"
            :src="userInfo.userpic || '/static/demo/userpic/16.jpg'"
            mode="aspectFill"
            style="width: 100rpx; height: 100rpx; border-radius: 50rpx"
          ></image>
          <view class="me-t-left-content">
            <view class="me-name font-lg font-weight">
              {{ userInfo.username }}
            </view>
            <view class="me-name-b color-gray">
              <text class="mr">总帖子{{ post_count }}</text>
              <text>今日发帖{{ today_posts_count }}</text>
            </view>
          </view>
        </view>
        <view class="me-t-right">
          <text class="iconfont icon-jinru"></text>
        </view>
      </view>
    </template>
    <!-- 没有登录 -->
    <template v-else>
      <view class="t-c mt"> 登录社区，体验更多功能</view>
      <otherLoginVue></otherLoginVue>
      <view class="t-c color-gray mt-4" @click="gotoLogin">
        手机号/邮箱/账号登录
      </view>
    </template>

    <!-- 发帖信息 -->
    <view class="flex info">
      <view class="flex-1 t-c" v-for="item in topList" :key="item.id">
        <view class="font-weight font-lg"> {{ item.num }} </view>
        <view class="font-md">{{ item.name }}</view>
      </view>
    </view>
    <!-- 广告位 -->
    <image
      src="../../static/demo/datapic/2.jpg"
      mode="widthFix"
      class="border w100"
    ></image>

    <!-- 浏览历史 -->
    <uni-list>
      <uni-list-item
        showArrow
        :title="item.title"
        v-for="(item, index) in uniList"
        :key="index"
      >
        <template v-slot:header>
          <view class="slot-box">
            <text class="iconfont font-md mr" :class="item.icon"></text>
          </view>
        </template>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script>
import otherLoginVue from "../../components/common/other-login.vue";
import { mapState } from "vuex";
import { getcounts } from "@/api/api";
export default {
  components: { otherLoginVue },
  data() {
    return {
      post_count: 0,
      withfollow_count: 0,
      withfen_count: 0,
      comments_count: 0,
      today_posts_count: 0,
      topList: [
        { id: 1, num: 1, name: "帖子" },
        { id: 2, num: 10, name: "动态" },
        { id: 3, num: 5, name: "评论" },
        { id: 4, num: 3, name: "粉丝" },
      ],
      uniList: [
        {
          title: "浏览历史",
          icon: "icon-liulan",
        },
        {
          title: "社区认证",
          icon: "icon-huiyuanvip",
        },
        {
          title: "审核帖子",
          icon: "icon-icon_im_keyboard",
        },
      ],
    };
  },
  computed: {
    ...mapState(["isLogin", "userInfo"]),
  },
  mounted() {
    console.log(this.isLogin);
    //
    if (this.$store.state.token) {
      this.getcount();
    }
  },
  methods: {
    getcount() {
      getcounts(this.$store.state.userInfo.userinfo.user_id).then((res) => {
        this.post_count = res.post_count; //帖子
        this.topList[0].num = res.post_count;
        this.topList[1].num = res.today_posts_count;
        this.topList[2].num = res.comments_count;
        this.topList[3].num = res.withfen_count;

        this.today_posts_count = res.today_posts_count; //今日发帖/动态
      });
    },
    gotouse() {
      console.log("去详情页");

      uni.navigateTo({
        url: `/pages/user-space/user-space?userId=${this.$store.state.userInfo.userinfo.user_id}`,
      });
    },
    gotoLogin() {
      uni.navigateTo({
        url: "../login/login",
      });
    },
  },
  onNavigationBarButtonTap() {
    // console.log("深圳")
    // 进入设置
    uni.navigateTo({
      url: "../user-set/user-set",
    });
  },
};
</script>

<style>
.uni-app--showtabbar uni-page-wrapper::after {
  display: none !important;
}
.me-name-b {
  margin-top: 25rpx;
}
.info {
  padding: 60rpx 0;
}

.slot-box {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
}

.slot-image {
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  margin-right: 10px;
  width: 30px;
  height: 30px;
}

.slot-text {
  flex: 1;
  font-size: 14px;
  color: #4cd964;
  margin-right: 10px;
}
</style>
